<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>用户登录</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="Keywords" content="网站关键词">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.title {
				color: orange;
				font-size: 24px;
				margin: auto 0;
			}

			a {
				text-decoration: none;
			}

			div {
				width: 450px;
			}

			.frame {
				height: 30px;
			}

			#header {
				height: 60px;
				width: 100%;
				background-color: #CACACA;
			}

			.header-center {
				width: 1000px;
				margin: 0 auto;
				height: 100%;
			}

			.content {
				width: 450px;
				margin: 0 auto;
			}

			.content .alert {
				margin: 15px 0;
			}

			.content .protect {
				margin: 20px 0;
			}

			.protect a {
				text-decoration: none;
				color: blue;
			}

			input {
				margin: 20px 0;
			}
		</style>

	</head>
	<body>
		<div id="header">
			<div class="header-center">
				<a href="" class="title">
					易买网安全中心</a>
				<span>|修改密码</span>
				<span>反馈问题</span>
			</div>
		</div>
		<div class="content">
			<p class="alert">请认真填写下面的资料，为了防止他人冒充，
				只有当您提供的资料足够完整且真实时，才能通过身份验证。</p>
			<p class="protect">全部资料仅用于身份验证并受到易买网<a href="">隐私政策</a>保护</p>
			<form action="ChangePasswordServlet" method="post">
				<div>
					<p>用户名（必填）</p>
					<input type="text" class="frame" size="60" name="username" autocomplete="off" /><br />
				</div>
				<div>
					<p> 邮箱（必填）</p>
					<input type="text" class="frame" id="l_email" size="60" name="email" autocomplete="off" />
					<span class="WrongInfo" style="margin-top:10px; color: red; clear:both"></span>
				</div>
				<div>
					<br />
					<p>手机号（必填）</p>
					<input type="text" class="frame" size="60" name="phone" id="l_tel" autocomplete="off" />
					<span class="addWrongInfo" style="margin-top:10px; color: red; clear:both"></span>
					<br />
				</div>
				<div id="passwordHistory">
					<br />
					<p>当前或曾经使用过的密码（尽量回忆多个，越准确越有效）</p>
					<input type="password" class="frame" size="60" name="password" autocomplete="off" />
					<input type="password" class="frame" size="60" name="password" autocomplete="off" />
					<p onclick="addMore();">添加更多</p>
					<input type="submit" value="确认" />
				</div>
			</form>

		</div>

		<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function addMore() {
				var newinput = document.createElement("input");
				newinput.setAttribute('type', 'text');
				newinput.setAttribute('class', 'frame');
				newinput.setAttribute('size', 60);
				newinput.setAttribute('name', 'password');
				var passwordHistory = document.getElementById("passwordHistory");
				var phInput = passwordHistory.childNodes;
				var len = phInput.length;
				passwordHistory.insertBefore(newinput, phInput[len - 4]);
			}

			//邮箱正则验证
			$("#l_email").blur(function() {
				var email = $("#l_email").val();
				var ret = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
				if (!ret.test(email)) {
					$(".WrongInfo").html("*邮箱格式不正确，请重新输入！");
				} else {
					$(".WrongInfo").html("");
				}
			});

			//手机正则验证
			$("#l_tel").blur(function() {
				var tel = $("#l_tel").val();
				var ret = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
				if (!ret.test(tel)) {
					$(".addWrongInfo").html("*手机号格式不正确，请重新输入！");
				} else {
					$(".addWrongInfo").html("");
				}
			});
		</script>
	</body>
</html>
